<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本溢出处理</title>
    <style>
      h2 {
        /* vw是适口宽度，移动端常用单位 */
        width: 100vw;
        border: 1px solid black;
        overflow: hidden;
        /* 设置元素为弹性伸缩盒 */
        display: -webkit-box;
        /* 设置弹性盒纵向排列 */
        -webkit-box-orient: vertical;
        /* 你要显示多少行 而且设置这个属性后，不需要单独设置ellipsis就可以显示为省略号*/
        -webkit-line-clamp: 3;
      }
    </style>
  </head>
  <body>
    <h2>
      我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万我爱前端，键盘敲烂，月薪过万
    </h2>
  </body>
</html>
